<template>
  <div>
    <el-dialog :title="add_children_title" v-model="add_children_status" width="500px" @closed="closed()">
      <div>
        <el-form ref="form" :model="form" label-width="80px" size="mini">
          <el-form-item label="网站标题">
            <el-input v-model="form.meta.web_title"></el-input>
          </el-form-item>
          <el-form-item label="路由URL">
            <el-input v-model="form.path"></el-input>
          </el-form-item>
          <el-form-item label="路由名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="文件位置">
            <el-input v-model="form.component"></el-input>
          </el-form-item>
          <el-form-item label="显示方式">
            <el-radio-group v-model="form.meta.show_site">
              <el-radio :label="1">位于框架内</el-radio>
              <el-radio :label="0">全屏显示</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="mini" @click="add_children_status = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="add_route()">新增</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ["data"],
  data() {
    return {
      add_children_title:'',
      form: {
        //组件表单
        path: "",
        name: "",
        component: "",
        meta: {
          show_site: 1,
          web_title: ""
        }
      },
      add_children_status: false,
      route_data: []
    };
  },
  methods: {
    add_route(){
      if (this.route_data[this.data.index].children==undefined) {
        this.route_data[this.data.index].children=[]
        this.route_data[this.data.index].children.splice(0,0,this.form)
      } else {
        this.route_data[this.data.index].children.splice(0,0,this.form)
      }
      sessionStorage.setItem("route_data", JSON.stringify(this.route_data));
      this.$router.go(0);
    },
    closed() {
      this.$emit("update:modelValue", false);
    }
  },
  mounted() {
    this.route_data = JSON.parse(sessionStorage.getItem("route_data"));
  },
  watch: {
    data() {
      this.add_children_title=this.route_data[this.data.index].meta.web_title+'——添加嵌套路由'
      this.add_children_status = this.data.status;
    }
  }
};
</script>